<!DOCTYPE html>
<html>

<head>
  <title>单行文字垂直跑马灯效果</title>
  <style type="text/css">
    ul,
    li {
      list-style: none;
      display: block;
      margin: 0;
      padding: 0;
    }

    #loop-show-box {
      width: 300px;
      height: 25px;
      line-height: 25px;
      background: red;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      overflow: hidden;
    }

    .li-style {
      width: 100%;
      height: 25px;
      text-align: center;
    }
  </style>
</head>

<body>
<div id="loop-show-box">
  <!-- 定义两个垂直滚动的区域 -->
  <ul id="con1">
    <!-- 第一个区域的内容 -->
    <li class="li-style">测试1号</li>
    <li class="li-style">测试2号</li>
    <li class="li-style">测试3号</li>
    <li class="li-style">测试4号</li>
  </ul>
  <ul id="con2"></ul>
</div>
<script type="text/javascript">
  // 获取相关元素
  var area = document.getElementById('loop-show-box');
  var con1 = document.getElementById('con1');
  var con2 = document.getElementById('con2');
  var mytimer1 = null; //这个定时器用于在滚动行为中引入暂停或延迟效果。当滚动达到行高的倍数时（在这里是25像素），同时清除 mytimer 和 mytimer1。在延时1000毫秒（1秒）后，重新启动 mytimer。
  var mytimer = null;  //这个定时器负责以固定的时间间隔（time 毫秒）连续调用
  var time = 1000 / 60;
  // 复制第一个区域的内容到第二个区域
  con2.innerHTML = con1.innerHTML;

  // 定义滚动函数
  function scrollUp() {
    if (area.scrollTop >= con1.offsetHeight) {
      // 如果滚动到第一个区域的末尾，则回到起始位置
      area.scrollTop = 0;
    } else {
      if (area.scrollTop % 25 == 0) {
        // 如果滚动的距离是行高的整数倍，停止定时器，稍作延迟后再启动
        clearInterval(mytimer);
        clearInterval(mytimer1);
        mytimer1 = setTimeout(function () {
          mytimer = setInterval(scrollUp, time);
        }, 1000);
      }
      // 向上滚动一行的高度
      area.scrollTop++;
    }
  }
  // 启动滚动定时器
  mytimer = setInterval(scrollUp, time);
</script>
</body>

</html>
